<template>
    <view class="category-pages" :class="themeName" :style="[pageStyle]">
        <!-- #ifndef  H5 -->
        <u-sticky offset-top="0" h5-nav-height="0" bg-color="transparent">
            <u-navbar :is-back="false" :title="title" :title-bold="true" :is-fixed="false" :border-bottom="false"
                :background="{ background: 'rgba(256,256, 256, 1)' }" title-color="#000"></u-navbar>
        </u-sticky>
        <!-- #endif -->
		
		<!-- #ifndef  H5 -->
		<!-- <custom-navbar :title="'优品嗨淘'" :percent="percent"></custom-navbar> -->
		<!-- #endif -->

        <!-- start header -->
        <!-- header desc: 头部内容应该包含一个搜索框，再加一个 tab切换到搜索框 -->
		<view class="category-header">
			<view v-for="(item, index) in headPageData" :key="index" >
			    <template v-if="item.name == 'search'">
					<view class="category-header-search-wrap" style="margin-top: 38rpx;">
						<view class="category-header-name">
							<text>{{ title }}</text>
						</view>
						<view class="category-header-search">
							<w-search v-show="item.show" :content="item.content" :styles="item.styles" />
						</view>
					</view>
			    </template>
			</view>
			<view style="border-top: 1rpx solid #fff;padding: 10rpx 0; margin-top: 38rpx;">
				
			</view>
			<view class="category-header-nav">
				<view class="category-header-nav__title">
					<text>热门搜索</text>
				</view>
				<view class="category-header-nav__content">
					<scroll-view scroll-x >
						<view class="category-header-nav_scroll">
							<view 
								v-for="(item, index) in headNavlist" 
								:key="index" 
								class="category-header-nav__item"
							> 
								<router-link 
									:to="{
										path: '/pages/goods_search/goods_search', 
										query: {
											name: item.name
										}}"
								>
									{{ item.name }}
								</router-link>		
							</view>
						</view>
					</scroll-view>
				</view>
				
			</view>
		</view>
        

        <!-- end header -->
        <view v-for="(item, index) in bodyPageData" :key="index" :class="[item.name]">
            <template v-if="item.name == 'search'">
                <w-search v-show="item.show" :content="item.content" :styles="item.styles" />
            </template>
            <template v-if="item.name == 'category'">
                <w-category class="category" v-show="item.show" :content="item.content" :styles="item.styles"
                    :height="height" />
            </template>
        </view>
        <view class="tabbar">
            <tabbar />
        </view>
    </view>
</template>

<script>
/**
 * 这个页面，也是通过后台配置出来的。不想再去配了，这里，先写死
 * 
 */
import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js";
import { apiGetPage } from "@/api/store";
import { apiGoodsCategory, apiGoodsLists } from "@/api/goods";
import { getRect } from "@/utils/tools";
import { mapGetters, mapState } from "vuex";
export default {
    mixins: [MescrollMixin],
	comments: {
	},
    data() {
        return {
            styles: {},
            pagesData: [],
            height: 0,
            goodsList: [],
            title: "",
			indicator: true,
			headNavlist: [
				{name: "笔记本"},
				{name: "奶瓶"},
				{name: "手机"},
				{name: "护肤"},
				{name: "手环"},
				
				
			],
			percent: 0
        };
    },
	computed: {
	    ...mapGetters(["userInfo"]),
	
	    pageStyle() {
	        const { background_color, background_image, background_type } =
	            this.styles;
	        if (background_type == 0 || !background_image || !background_color) {
	            return;
	        }
	        const style =
	            background_type == 1
	                ? {
	                    "background-color": background_color,
	                }
	                : {
	                    "background-image": `url(${background_image})`,
	                };
	        return style;
	    },
		headPageData() {
			return this.pagesData.filter(item => {
				return item.name === 'search'
			})
		},
		bodyPageData () {
			return this.pagesData.filter(item => {
				return item.name !== 'search'
			})
		}
	},
    onLoad() {
        apiGetPage({
            type: 2,
        }).then((res) => {
            const {
                common: { title },
                common,
                content,
            } = res;
            // uni.setNavigationBarTitle({
            //     title,
            // });
			this.title = title
            this.styles = common;
            this.pagesData = content;
            this.$nextTick(() => {
                this.getHeight();
            });
        });
    },
    onShareAppMessage() {
        const { code } = this.userInfo;

        const share = {
            path: `/pages/category/category?invite_code=${code}`,
        };
        return share;
    },
	onPageScroll(e) {
		const top = uni.upx2px(100)
		const {
			scrollTop
		} = e
		this.percent = scrollTop / top > 1 ? 1 : scrollTop / top
	},
    
    methods: {
        async getHeight() {
            const category = await getRect(".category");
            this.height = category.height;
        },
		gotoSearch(item) {
			this.$Route.push
			uni.switchTab({
				url: '/pages/goods_search/goods_search',
				
			})
		},
        upCallback(page) {
            const pageNum = page.num;
            const pageSize = page.size;

            apiGoodsLists({
                page_no: pageNum,
                page_size: pageSize,
            })
                .then(({ lists, page_size, count }) => {
                    // 如果是第一页需手动置空列表
                    if (page.num == 1) this.goodsList = [];
                    // 重置列表数据
                    this.goodsList = [...this.goodsList, ...lists];
                    this.mescroll.endBySize(page_size, count);
                })
                .catch(() => {
                    this.mescroll.endErr();
                });
        },
    }, // 使用mixin (在main.js注册全局组件)
};
</script>

<style lang="scss">
/*根元素需要有固定的高度*/
page {
    height: 100%;
    box-sizing: border-box;
    // 支付宝小程序,钉钉小程序需添加绝对定位,否则height:100%失效: https://opendocs.alipay.com/mini/framework/acss#%E5%B8%B8%E8%A7%81%E9%97%AE%E9%A2%98
    /* #ifdef MP-ALIPAY || MP-DINGTALK*/
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;

    /* #endif */
    /*需给父元素设置height:100%*/
    .category-pages {
        height: 100%;
        display: flex;
        flex-direction: column;
        background-repeat: no-repeat;
        background-size: 100% auto;
		// background: linear-gradient(0deg, #E4F2F8 80%,  #ff8200 100%);
		// background: linear-gradient(0deg, #FFFEFA 80%,  #ff8200 100%, #EEEEEE 100%);
		background-image: linear-gradient(to bottom, #ff8200 0%, #F7F7F7 40%);
		
        /* 中间 */
        .category {
            flex: 1;
            min-width: 0;
            min-height: 0;
            /* 需给flex:1的元素加上最小高,否则内容超过会溢出容器 (如:小程序Android真机) */
            display: flex;
            flex-direction: column;
        }
    }
}
</style>

<style class="scss" scoped>
	.category-header {
		/* background: linear-gradient(0deg, #FFFEFA 0%, #ff8200 100%); */
	}
	.category-header-search-wrap {
		display: flex;
		flex-direction: row;
		align-items: center;
		padding-left: 24rpx;
	}
	.category-header-name {
		font-family: FZLanTingHeiS-H-GB;
		font-size: 45rpx;
		color: #000;
	}
	.category-header-search {
		flex: 1;
	}
	.category-header-nav {
		display: flex;
		flex-direction: row;
		align-items: center;
		padding: 38rpx 34rpx;
	}
	.category-header-nav__title {
		width: 100rpx;
		margin-right: 25rpx;
		font-family: PingFang SC;
		font-weight: 700;
		font-size: 25rpx;
		color: #000;
	}
	.category-header-nav__content {
		width: calc(100% - 100rpx - 25rpx)
	}
	.category-header-nav_scroll {
		/* display: flex;
		flex-direction: row;
		align-items: center;
		overflow: hidden; */
		white-space: nowrap;
	}
	.category-header-nav__item {
		padding: 15rpx 20rpx;
		margin: 0 10rpx;
		font-size: 22rpx;
		font-weight: 700;
		color: #000;
		background-color: #fff;
		border-radius: 999px;
		display: inline-block
	}
</style>
